<template>
  <div
    :id="_id"
    style="width: auto;height: 400px;pointer-events: none;"
  ></div>
</template>

<script>
import echarts from "echarts";
import geoJson from "./china";
import uuid from "@/utils/uuid";

export default {
  name: "map-geo",
  computed: {
    optionData() {
      let origin = this.$store.state.countData.area.slice();
      let newData = origin.map(item => {
        return {
          name: item.provinceShortName,
          value: item.confirmedCount,
          selected: true
        };
      });
      return newData;
    }
  },
  data() {
    return {
      // eslint-disable-next-line vue/no-reserved-keys
      _id:0,
      options: {
        // title: {
        //   text: '新型冠状病毒感染的肺炎疫情',
        //   left: 'center'
        // },
        tooltip: {
          triggerOn: "click",
          formatter: function(e, t, n) {
            return 0.5 == e.value
              ? e.name + "：有疑似病例"
              : e.seriesName + "\n" + e.name + "：" + e.value;
          }
        },
        visualMap: {
          min: 0,
          max: 1000,
          left: 26,
          bottom: 40,
          showLabel: !0,
          //text: ["高", "低"],
          textStyle: {
            fontSize: 8
          },
          pieces: [
            {
              gt: 10000,
              label: "> 10000 人",
              color: "#7f1100"
            },
            {
              gte: 1000,
              lte: 10000,
              label: "1000 - 9999 人",
              color: "#ff5428"
            },
            {
              gte: 100,
              lte: 1000,
              label: "100 - 999 人",
              color: "#ff8c71"
            },
            {
              gte: 10,
              lte: 100,
              label: "10 - 99 人",
              color: "#ffd768"
            },
            {
              gt: 0,
              lt: 10,
              label: "0 - 9 人",
              color: "#ffffff"
            }
          ],
          show: !0
        },
        geo: {
          map: "china",
          roam: !1,
          scaleLimit: {
            min: 1,
            max: 2
          },
          zoom: 1.23,
          top: 50,
          label: {
            normal: {
              show: !0,
              fontSize: "7",
              color: "rgba(0,0,0,0.7)"
            }
          },
          itemStyle: {
            normal: {
              //shadowBlur: 50,
              //shadowColor: 'rgba(0, 0, 0, 0.2)',
              borderColor: "rgba(0, 0, 0, 0.2)"
            },
            emphasis: {
              areaColor: "#f2d5ad",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              borderWidth: 0
            }
          }
        },
        series: [
          {
            name: "确诊病例",
            type: "map",
            silent: true,
            geoIndex: 0,
            data: []
          }
        ]
      }
    };
  },
  watch:{
    optionData:{
      handler(val) {
        this.options.series[0].data = this.optionData;
        this.chart.setOption(this.options);
      },
      deep:true
    }
  },
  created() {
    this._id = uuid()
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.chart = echarts.init(document.getElementById(this._id));
      echarts.registerMap("china", geoJson);
      this.options.series[0].data = this.optionData;
      this.chart.setOption(this.options);
    }
  }
};
</script>

<style scoped></style>
